<template>
  <div class="task-item">
    <div class="status">
      {{ useGetLabel('dispatchState', item.state) }}
    </div>
    <van-field name="switch" label="单号" @click="handleGoDetail(item)">
      <template #input>
        <div class="title">{{ item.order_id }} ></div>
      </template>
    </van-field>

    <template v-if="userType === 'dispatch'">
      <van-field name="switch" label="申请时间">
        <template #input>{{ item.create_time }}</template>
      </van-field>
      <van-field name="switch" label="到达地址">
        <template #input>
          <div v-for="(str, idx) of item.destination_list" :key="idx">
            {{ str }}
          </div>
        </template>
      </van-field>
      <van-field v-if="item.car_number" name="switch" label="车辆">
        <template #input>{{ item.car_number }}</template>
      </van-field>
      <van-field name="switch" label="预计出车时间">
        <template #input>{{ item.plan_begin_time }}</template>
      </van-field>
      <van-field name="switch" label="申请人">
        <template #input>{{ item.create_by_name }}</template>
      </van-field>
      <van-field name="switch" label="用车单位">
        <template #input>{{ item.department_name }}</template>
      </van-field>
      <van-field name="switch" label="要车人">
        <template #input>{{ item.user_name || '-' }}</template>
      </van-field>
    </template>

    <template v-if="userType === 'driver'">
      <van-field name="switch" label="出发地址">
        <template #input>{{ item.start }}</template>
      </van-field>
      <van-field name="switch" label="到达地址">
        <template #input>
          <div v-for="(str, idx) of item.destination_list" :key="idx">
            {{ str }}
          </div>
        </template>
      </van-field>
      <van-field v-if="item.car_number" name="switch" label="车辆">
        <template #input>{{ item.car_number }}</template>
      </van-field>
      <van-field name="switch" label="预计出车时间">
        <template #input>{{ item.plan_begin_time }}</template>
      </van-field>
      <van-field name="switch" label="用车类型">
        <template #input>{{ item.use_car_type_name }}</template>
      </van-field>
      <van-field name="switch" label="预计里程">
        <template #input>{{ item.expected_mileage || '-' }}KM</template>
      </van-field>
    </template>

    <TaskHandle
      v-if="userType === 'dispatch'"
      :item="item"
      @on-handle-success="handleSuccess"
    ></TaskHandle>

    <TaskHandleDriver
      v-if="userType === 'driver'"
      :item="item"
      @on-handle-success="handleSuccess"
    ></TaskHandleDriver>
  </div>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineEmits, defineProps } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store/index';
  import useGetLabel from '@/hooks/useGetLabel';
  import TaskHandle from '@/views/role/dispatch/allTask/TaskHandle/index.vue';
  import TaskHandleDriver from '@/views/role/driver/allTask/TaskHandle/index.vue';

  interface Props {
    item: any;
  }
  withDefaults(defineProps<Props>(), {});
  const emit = defineEmits(['getList']);

  const userStore = useUserStore();
  const { userType } = userStore;

  const router = useRouter();

  const handleGoDetail = (item: any) => {
    router.push({
      name: 'taskDetail',
      query: {
        id: item.state === '未结算' ? item.id_details : item.id,
      },
    });
  };

  const handleSuccess = () => {
    emit('getList');
  };
</script>

<style lang="less" scoped>
  .task-item {
    position: relative;
    margin-top: 20px;
    width: 100%;
    background: #fff;
    .title {
      color: #999;
    }
    .btns {
      padding: 20px;
      text-align: right;
    }

    .status {
      position: absolute;
      right: 20px;
      top: 24px;
      z-index: 10;
      color: blue;
      font-size: 12px;
    }
  }
</style>
